import React, {useEffect, useRef, useState} from "react";
import {Button, Flex, Form, Select} from "antd";
import {ipcRenderer} from "electron";
import {useMount} from "ahooks";

const SceneModal = (props) => {
    // 在这里可以访问传递的数据
    const receivedData = props.data;



    useEffect(() => {
        getSourceSettings();
    }, []);
    const getSourceSettings = async () => {
        const result = await window.tm?.ipcRenderer.invoke('getSourceSettings', {
            sceneName: receivedData.data.sceneName,
            name: receivedData.data.name
        })
        console.log("result2222222", result)
        debugger
        const windowData = await window.tm?.ipcRenderer.invoke("getAllWindows");
        console.log("windowData33333", windowData)
        if (windowData) {
            windowData.shift();
            setWindowTypeData(windowData)
        }
        console.log('typeof result.settings.window !== "object" && windowData',typeof result.settings.window !== "object")
        if (typeof result.settings.window === "string") {
            setWindowTypeCheckData(result.settings.window);
        } else {
            setWindowTypeCheckData(windowData[0].value);
        }



    }

    const preview = useRef(null)
    useMount(()=>{

        async function  init() {
            const setupPreview = async () => {
                if(!preview.current) return
                const {width, height, x, y} = preview.current.getBoundingClientRect();
                const result = await window.tm?.ipcRenderer.invoke('preview-init-child', {
                    width,
                    height,
                    x,
                    y
                });
                preview.style = `flex-basis:${result.height}px!important`;
                return result
            }
            async function resizePreview() {

                const previewContainer = preview.current

                if(!previewContainer) return
                const {width, height, x, y} = previewContainer.getBoundingClientRect();
                const result = await window.tm!.ipcRenderer.invoke('preview-bounds-child', {
                    width,
                    height,
                    x,
                    y,
                });
                previewContainer.style = `flex-basis:${result.height}px!important`;
            }
            const previewSize = await setupPreview()
            if (previewSize) {
                preview.current.innerHTML = ''
            }
            const ro = new ResizeObserver(resizePreview);
            if (preview) {
                ro.observe(preview.current);
            }

        }
        init()
    })

    const [windowTypeData, setWindowTypeData] = useState([]);
    const [defaultValue, setDefaultValue] = useState('');
    //选中窗口类型数据
    const [windowTypeCheckData, setWindowTypeCheckData] = useState({});

    return (
        <Flex gap="middle" vertical={"vertical"} style={{height: "100%", backgroundColor: "#2e477e"}}>
            <div
                id="preview"
                ref={preview}
                className={'preview'}
            >
                Initializing...
            </div>
            <div style={{
                width: "100%",
                display: "flex",
                justifyContent: "center",
                flex: '1 1 auto',
                overflowY: 'auto'
            }}>
                <Form
                    labelCol={{span: 6}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                    initialValues={{size: "default"}}
                    size={"default"}
                    style={{width: "100%"}}
                >
                    <Form.Item label="窗口">
                        {
                              <Select
                                value={windowTypeCheckData}
                                options={windowTypeData}
                                fieldNames={{
                                    value: 'value',
                                    label: 'name'
                                }}
                                onChange={async (value, option) => {
                                    console.log("捕获方式=====", value, option)
                                    setWindowTypeCheckData(option);
                                    const updateData = {
                                        sceneName: receivedData.data.sceneName,
                                        name: receivedData.data.name,
                                        updateSettings: {
                                            window: value,
                                        }
                                    };
                                    console.log("updateSourceSettings", updateData)
                                    const result = await window.tm?.ipcRenderer.invoke('updateSourceSettings', updateData);
                                    console.log("result", result)
                                }}
                            />
                        }

                    </Form.Item>
                </Form>
            </div>
            <div style={{
                width: "100%",
                height: "40px",
                display: "flex",
                justifyContent: "flex-end",
                backgroundColor: "#1c295a",
                alignItems: "center"
            }}>
                <Button type={"primary"} style={{marginRight: "20px", backgroundColor: "#293d76"}}
                        onClick={async () => {
                            await window.tm?.ipcRenderer.invoke('closeObsModal')
                        }}>取消</Button>
                <Button type={"primary"} style={{marginRight: "20px", backgroundColor: "#293d76"}}
                        onClick={async () => {


                            await window.tm?.ipcRenderer.invoke('closeObsModal');
                        }}>确定</Button>
            </div>
        </Flex>
    );
};

export default SceneModal;